Analityka instalacji PWA frontend: Zrozumienie i śledzenie zachowań użytkowników podczas instalacji

Progresywne Aplikacje Webowe (PWA) stały się potężnym rozwiązaniem do dostarczania doświadczeń przypominających aplikacje w sieci. Jednak samo zbudowanie PWA to za mało. Zrozumienie, w jaki sposób użytkownicy odkrywają, wchodzą w interakcje i ostatecznie instalują Twoją PWA, jest kluczowe dla optymalizacji jej wydajności i maksymalizacji jej wpływu. Ten przewodnik zawiera kompleksowy przegląd technik analityki frontendowej do śledzenia zachowań użytkowników podczas instalacji PWA, co pozwoli Ci uzyskać cenne spostrzeżenia i poprawić wskaźnik instalacji Twojej PWA.

Dlaczego warto śledzić zachowania użytkowników podczas instalacji PWA?

Zrozumienie, w jaki sposób użytkownicy wchodzą w interakcję z procesem instalacji Twojej PWA, jest kluczowe z kilku powodów:

• Identyfikacja punktów tarcia: Precyzyjne określenie, gdzie użytkownicy rezygnują z procesu instalacji, pozwala rozwiązać problemy z użytecznością i usprawnić doświadczenie.
• Optymalizacja monitów instalacyjnych: Testowanie różnych strategii monitowania (np. czasu, miejsca, treści wiadomości) pomaga określić najskuteczniejszy sposób zachęcania do instalacji.
• Poprawa zaangażowania użytkowników: Rozumiejąc zachowania użytkowników, możesz dostosować swoją PWA tak, aby lepiej spełniała ich potrzeby i oczekiwania, co prowadzi do zwiększonego zaangażowania i retencji.
• Pomiar wpływu zmian: Śledzenie wskaźników instalacji przed i po wprowadzeniu zmian (np. aktualizacje interfejsu użytkownika, poprawki wydajności) pozwala ocenić ich skuteczność.
• Podejmowanie decyzji opartych na danych: Dostęp do wiarygodnych danych dotyczących instalacji umożliwia podejmowanie świadomych decyzji dotyczących strategii rozwoju i marketingu Twojej PWA.

Kluczowe metryki do śledzenia

Zanim zagłębisz się w implementację, zidentyfikujmy kluczowe metryki, które powinieneś śledzić, aby uzyskać kompleksowe zrozumienie zachowań związanych z instalacją Twojej PWA:

• Wyświetlenia monitu instalacyjnego: Liczba wyświetleń monitu instalacyjnego użytkownikom.
• Akceptacje monitu instalacyjnego: Liczba razy, kiedy użytkownicy zaakceptowali monit instalacyjny i rozpoczęli proces instalacji.
• Odrzucenia monitu instalacyjnego: Liczba razy, kiedy użytkownicy odrzucili monit instalacyjny.
• Ignorowania monitu instalacyjnego: Liczba razy, kiedy użytkownicy zignorowali monit instalacyjny (np. klikając poza nim lub przechodząc na inną stronę).
• Udane instalacje: Liczba udanych instalacji PWA.
• Współczynnik instalacji: Procent użytkowników, którzy zainstalowali PWA po wyświetleniu monitu instalacyjnego (Akceptacje monitu instalacyjnego / Wyświetlenia monitu instalacyjnego).
• Czas instalacji: Czas potrzebny na zainstalowanie PWA po zaakceptowaniu monitu przez użytkownika. Może to pomóc w identyfikacji problemów z siecią lub z Twoim service workerem.
• Agent użytkownika: Rodzaj przeglądarki i systemu operacyjnego, którego użytkownik używa do dostępu do PWA. Pomaga to w identyfikacji problemów specyficznych dla platformy.
• Źródło polecenia: Skąd pochodził użytkownik (np. wyszukiwarka, media społecznościowe, bezpośredni link). Pomaga to zrozumieć, które kanały marketingowe są najskuteczniejsze w generowaniu instalacji PWA.
• Niestandardowe zdarzenia: Śledź konkretne interakcje użytkownika związane z procesem instalacji, takie jak kliknięcie przycisku "Zainstaluj PWA" lub wyświetlenie konkretnego ekranu wprowadzającego.

Implementacja analityki frontendowej do śledzenia instalacji PWA

Oto przewodnik krok po kroku po implementacji analityki frontendowej do śledzenia zachowań użytkowników podczas instalacji PWA:

1. Wybierz platformę analityczną

Wybierz platformę analityczną, która zapewnia funkcje i elastyczność potrzebne do skutecznego śledzenia instalacji PWA. Popularne opcje to:

• Google Analytics: Powszechnie używana i darmowa platforma oferująca kompleksowe możliwości analityczne. Wymaga implementacji śledzenia zdarzeń.
• Firebase Analytics: Platforma analityczna Google dla urządzeń mobilnych, dobrze przystosowana do śledzenia instalacji PWA i zachowań użytkowników.
• Mixpanel: Potężna platforma analityczna produktu, która pozwala śledzić zdarzenia użytkowników i segmentować ich na podstawie ich zachowań.
• Amplitude: Kolejna popularna platforma analityczna produktu, oferująca podobne funkcje jak Mixpanel.
• Matomo (dawniej Piwik): Platforma analityczna typu open-source, która daje pełną kontrolę nad Twoimi danymi. Możesz ją hostować samodzielnie.
• Plausible Analytics: Lekka alternatywa analityczna, skupiająca się na prywatności.

Przy wyborze platformy analitycznej weź pod uwagę takie czynniki, jak ceny, funkcje, łatwość integracji i prywatność danych. Dla uproszczenia, poniższe przykłady będą głównie korzystać z Google Analytics, ale koncepcje można zaadaptować do innych platform.

2. Zintegruj platformę analityczną z Twoją PWA

Postępuj zgodnie z dokumentacją dostarczoną przez wybraną platformę analityczną, aby zintegrować ją z Twoją PWA. Zazwyczaj wiąże się to z dodaniem fragmentu kodu JavaScript do głównego pliku HTML Twojej PWA.

Przykład (Google Analytics):

            




            

              
                Copy
              
            
          

Zastąp UA-XXXXX-Y swoim identyfikatorem śledzenia Google Analytics.

3. Śledź wyświetlenia monitu instalacyjnego

Musisz wykryć, kiedy przeglądarka wyzwala zdarzenie 'beforeinstallprompt'. To zdarzenie jest wyzwalane, gdy przeglądarka ustali, że PWA spełnia kryteria instalacji.

Przykład kodu JavaScript:

            
let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Report to Google Analytics that the install prompt was shown.
  gtag('event', 'install_prompt_viewed', {
    'event_category': 'PWA',
    'event_label': 'Install Prompt Viewed'
  });
});

            

              
                Copy
              
            
          

Ten fragment kodu nasłuchuje zdarzenia beforeinstallprompt, zapobiega automatycznemu wyświetlaniu domyślnego monitu (dając Ci kontrolę nad tym, kiedy i jak wyświetlić monit), przechowuje zdarzenie do późniejszego wykorzystania i wysyła zdarzenie do Google Analytics wskazujące, że monit instalacyjny został wyświetlony. event_category i event_label można dostosować do własnych potrzeb.

4. Śledź działania związane z monitem instalacyjnym (akceptacje, odrzucenia, ignorowanie)

Gdy użytkownik wchodzi w interakcję z Twoim niestandardowym monitem instalacyjnym, musisz śledzić jego działania. Użyjesz obiektu deferredPrompt, który wcześniej zapisałeś.

Przykład kodu JavaScript (Akceptacja monitu):

            
// Assuming you have a button or element that triggers the install
installButton.addEventListener('click', (e) => {
  // Show the install prompt
  deferredPrompt.prompt();
  // Report to Google Analytics that the install prompt was accepted.
  gtag('event', 'install_prompt_accepted', {
    'event_category': 'PWA',
    'event_label': 'Install Prompt Accepted'
  });
  // Wait for the user to respond to the prompt
  deferredPrompt.userChoice
    .then((choiceResult) => {
      if (choiceResult.outcome === 'accepted') {
        console.log('User accepted the install prompt');
      } else {
        console.log('User dismissed the install prompt');
        gtag('event', 'install_prompt_dismissed', {
          'event_category': 'PWA',
          'event_label': 'Install Prompt Dismissed'
        });
      }
      deferredPrompt = null;
    });
});

            

              
                Copy
              
            
          

Ten fragment kodu wyzwala monit instalacyjny, gdy użytkownik kliknie przycisk (installButton). Następnie wysyła zdarzenie do Google Analytics wskazujące, że monit został zaakceptowany. Używa również właściwości userChoice, aby określić, czy użytkownik zaakceptował, czy odrzucił monit, wysyłając odpowiednio kolejne zdarzenie. Na koniec ustawia deferredPrompt na null, ponieważ może być użyty tylko raz.

Aby śledzić ignorowane monity, możesz ustawić limit czasu po wyświetleniu monitu. Jeśli użytkownik nie wejdzie w interakcję z monitem w określonym czasie (np. 5 sekund), możesz założyć, że go zignorował i wysłać zdarzenie do Google Analytics.

Przykład kodu JavaScript (Ignorowanie monitu):

            
// After showing the prompt (using deferredPrompt.prompt()), start a timer
let ignoreTimer = setTimeout(() => {
  gtag('event', 'install_prompt_ignored', {
    'event_category': 'PWA',
    'event_label': 'Install Prompt Ignored'
  });
  ignoreTimer = null; // Clear the timer
}, 5000); // 5 seconds

// If the user interacts with the prompt (accepts or dismisses), clear the timer
deferredPrompt.userChoice.then(() => {
  clearTimeout(ignoreTimer);
  ignoreTimer = null;
});

            

              
                Copy
              
            
          

5. Śledź udane instalacje

Możesz wykryć, kiedy PWA została pomyślnie zainstalowana, używając zdarzenia appinstalled.

Przykład kodu JavaScript:

            
window.addEventListener('appinstalled', (evt) => {
  // Log install to analytics
  gtag('event', 'app_installed', {
    'event_category': 'PWA',
    'event_label': 'App Installed Successfully'
  });
});

            

              
                Copy
              
            
          

Ten fragment kodu nasłuchuje zdarzenia appinstalled i wysyła zdarzenie do Google Analytics wskazujące, że PWA została pomyślnie zainstalowana.

6. Śledź czas instalacji (zaawansowane)

Śledzenie czasu potrzebnego na zainstalowanie PWA może pomóc w identyfikacji potencjalnych wąskich gardeł wydajności, takich jak duże pamięci podręczne service workerów lub wolne połączenia sieciowe. Wymaga to nieco bardziej złożonej implementacji.

Przykład kodu JavaScript:

            
let installStartTime;

window.addEventListener('beforeinstallprompt', (e) => {
  e.preventDefault();
  deferredPrompt = e;
  installStartTime = Date.now(); // Record the time when the prompt is shown
});

installButton.addEventListener('click', (e) => {
  deferredPrompt.prompt();

  deferredPrompt.userChoice
    .then((choiceResult) => {
      if (choiceResult.outcome === 'accepted') {
        console.log('User accepted the install prompt');
      } else {
        console.log('User dismissed the install prompt');
      }
      deferredPrompt = null;
    });
});

window.addEventListener('appinstalled', (evt) => {
  const installEndTime = Date.now();
  const installDuration = installEndTime - installStartTime;

  gtag('event', 'app_installed', {
    'event_category': 'PWA',
    'event_label': 'App Installed Successfully',
    'value': installDuration // Send the installation time as a numeric value
  });

  installStartTime = null; // Reset the start time
});

            

              
                Copy
              
            
          

Ten fragment kodu rejestruje sygnaturę czasową wyświetlenia monitu instalacyjnego (installStartTime), a następnie oblicza czas trwania między tym momentem a zdarzeniem appinstalled (installDuration). Czas trwania instalacji jest następnie wysyłany do Google Analytics jako value zdarzenia app_installed. Możesz następnie analizować tę wartość w Google Analytics, aby zidentyfikować powolne instalacje.

7. Analizuj dane i optymalizuj

Po zaimplementowaniu kodu śledzącego możesz zacząć zbierać dane i analizować je, aby zidentyfikować obszary do poprawy. Używaj raportów i pulpitów nawigacyjnych dostarczanych przez Twoją platformę analityczną do wizualizacji danych i uzyskiwania spostrzeżeń.

Przykłady strategii optymalizacyjnych opartych na danych analitycznych:

• Niska liczba wyświetleń monitu instalacyjnego: Zbadaj, dlaczego zdarzenie beforeinstallprompt nie jest wyzwalane zgodnie z oczekiwaniami. Upewnij się, że Twoja PWA spełnia kryteria instalacji (np. prawidłowy manifest, zarejestrowany service worker, serwowane przez HTTPS).
• Niski współczynnik instalacji: Eksperymentuj z różnymi projektami monitów instalacyjnych, komunikatami i czasem ich wyświetlania. Rozważ testy A/B różnych strategii monitowania, aby zobaczyć, która działa najlepiej. Upewnij się, że Twoja PWA zapewnia wyraźną wartość i uzasadnia instalację.
• Wysoki wskaźnik odrzuceń/ignorowania monitu instalacyjnego: Ponownie oceń swoją strategię monitu instalacyjnego. Czy monit jest zbyt natrętny? Czy pojawia się w niewłaściwym czasie? Rozważ początkowe wyświetlenie bardziej subtelnego monitu, a bardziej widocznego dopiero po pewnym czasie interakcji użytkownika z PWA. Rozważ także dodanie do monitu linku "Dlaczego zainstalować?", wyjaśniającego korzyści.
• Długi czas instalacji: Zoptymalizuj kod service worker, zmniejsz rozmiar buforowanych zasobów i upewnij się, że Twój serwer szybko dostarcza zasoby. Użyj narzędzi deweloperskich przeglądarki, aby zidentyfikować wąskie gardła wydajności.

Zaawansowane techniki i rozważania

Niestandardowe wymiary i metryki

Większość platform analitycznych pozwala definiować niestandardowe wymiary i metryki do śledzenia konkretnych danych, które są istotne dla Twojej PWA. Na przykład, możesz utworzyć niestandardowy wymiar do śledzenia statusu subskrypcji użytkownika lub niestandardową metrykę do śledzenia liczby użyć konkretnej funkcji przed instalacją. Pozwala to na bardziej szczegółową analizę.

Testy A/B

Testy A/B to potężna technika porównywania różnych wersji monitu instalacyjnego lub procesu instalacji. Użyj narzędzi do testów A/B, aby losowo wyświetlać różne wersje różnym użytkownikom i śledzić, która wersja osiąga najlepsze wyniki pod względem współczynnika instalacji. Google Optimize to popularna platforma do testów A/B, która bezproblemowo integruje się z Google Analytics.

Segmentacja użytkowników

Segmentacja użytkowników na podstawie ich zachowań, danych demograficznych lub innych cech pozwala na identyfikację wzorców i trendów, które mogą nie być widoczne przy analizie danych jako całości. Na przykład, możesz segmentować użytkowników na podstawie ich źródła polecenia, aby zobaczyć, które kanały marketingowe są najskuteczniejsze w generowaniu instalacji PWA wśród różnych grup użytkowników.

Kwestie prywatności

Pamiętaj o prywatności użytkowników podczas implementowania analityki. Upewnij się, że przestrzegasz wszystkich obowiązujących przepisów dotyczących prywatności (np. RODO, CCPA) i bądź przejrzysty w kwestii tego, jak zbierasz i wykorzystujesz dane użytkowników. Rozważ użycie technik anonimizacji w celu ochrony prywatności użytkowników, jednocześnie zbierając cenne informacje. Wdrażaj jasną politykę prywatności i uzyskuj zgodę użytkowników tam, gdzie jest to wymagane.

Obsługa przypadków brzegowych i błędów

Przewiduj potencjalne przypadki brzegowe i błędy w swoim kodzie śledzącym i zaimplementuj odpowiednie mechanizmy obsługi błędów. Na przykład, zdarzenie beforeinstallprompt może nie być wyzwalane we wszystkich przeglądarkach lub we wszystkich warunkach. Upewnij się, że Twój kod elegancko obsługuje te sytuacje i nie zakłóca funkcjonalności Twojej PWA. Używaj bloków try-catch do wyłapywania potencjalnych błędów i logowania ich do konsoli lub serwisu logowania po stronie serwera.

Analityka po stronie serwera (opcjonalnie)

Chociaż ten przewodnik skupia się na analityce frontendowej, możesz również uzupełnić swoje dane analityką po stronie serwera. Może to być przydatne do śledzenia zdarzeń, które mają miejsce na serwerze, takich jak pomyślna rejestracja użytkownika lub zakończenie zakupu, oraz do korelowania zdarzeń po stronie serwera z danymi dotyczącymi instalacji frontendowej. Na przykład, możesz wysłać zdarzenie po stronie serwera do swojej platformy analitycznej, gdy użytkownik dokona zakupu po zainstalowaniu PWA, co pozwoli Ci zmierzyć zwrot z inwestycji (ROI) Twojej PWA.

Globalne przykłady i najlepsze praktyki

Implementując analitykę instalacji PWA dla globalnej publiczności, weź pod uwagę następujące kwestie:

• Lokalizacja: Upewnij się, że Twoje monity instalacyjne i komunikaty są zlokalizowane w różnych językach, aby dotrzeć do użytkowników z różnych krajów.
• Strefy czasowe: Bądź świadomy różnych stref czasowych podczas analizowania danych. Używaj spójnej strefy czasowej (np. UTC) do raportowania.
• Łączność sieciowa: Łączność sieciowa znacznie różni się w zależności od regionu. Weź to pod uwagę podczas analizy czasów instalacji i optymalizacji wydajności Twojej PWA. Wdrażaj strategie obsługi połączeń o niskiej przepustowości.
• Wrażliwość kulturowa: Pamiętaj o różnicach kulturowych podczas projektowania monitów instalacyjnych i komunikatów. Unikaj używania obrazów lub języka, które mogą być obraźliwe lub nieodpowiednie w niektórych kulturach.
• Przepisy dotyczące prywatności danych: Przestrzegaj przepisów dotyczących prywatności danych we wszystkich krajach, w których Twoja PWA jest dostępna. Może to wymagać wdrożenia różnych mechanizmów zbierania danych i zgody dla różnych regionów.

Przykład: Globalna PWA e-commerce mogłaby śledzić wskaźniki instalacji w różnych krajach i dostosowywać swoje kampanie marketingowe, aby skupić się na regionach o największym potencjale przyjęcia PWA. Mogłyby również przeprowadzać testy A/B różnych projektów monitów instalacyjnych, aby sprawdzić, które najlepiej rezonują z użytkownikami w różnych kontekstach kulturowych.

Podsumowanie

Śledzenie zachowań związanych z instalacją PWA jest kluczowe dla optymalizacji doświadczeń użytkownika i maksymalizacji wskaźników instalacji. Implementując techniki opisane w tym przewodniku, możesz uzyskać cenne spostrzeżenia na temat tego, jak użytkownicy wchodzą w interakcję z procesem instalacji Twojej PWA i podejmować decyzje oparte na danych w celu poprawy jej wydajności. Pamiętaj, aby wybrać odpowiednią platformę analityczną, śledzić kluczowe metryki, regularnie analizować dane i dostosowywać swoje strategie w oparciu o uzyskane wyniki. Koncentrując się na zachowaniach użytkowników i ciągłym optymalizowaniu Twojej PWA, możesz stworzyć przekonujące i angażujące doświadczenie przypominające aplikację, które napędza adopcję przez użytkowników i osiąga Twoje cele biznesowe.

Dalsze czytanie

• Google Developers: Banery instalacyjne aplikacji
• web.dev: Dodaj manifest aplikacji internetowej
• Workbox: Biblioteki JavaScript do dodawania obsługi offline do aplikacji internetowych